<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>异常数据表</title>
		<link rel="stylesheet" href="/static/css/common.css">
		<link rel="stylesheet" href="/static/css/function.css">
		<link rel="stylesheet" href="/static/css/table.css">
		<script src="/static/js/jquery2.js"></script>
	</head>
	<body>
		<nav>
			<button id="enter" type="button" onclick="enter()">
				<img src="/static/image/菜单.png" alt="菜单" width="27px">
			</button>
	
			<div id="user" onmouseover="staff_show()">
				<img src="/static/image/用户.jpg" width="30px">
				<div style="display: none;">
					<ul>
						<li>用户名：</li>
						<li>电话号码：</li>
						<li>邮箱：</li>
					</ul>
				</div>
			</div>

			<button id="showPopup" onclick="showPopup()">处理维修事务</button>
			<div id="overlay" draggable="true">
			  <div class="popup">
				<button id="close" type="button" onclick="hidePopup()">
					<img src="/static/image/错误.png" alt="" width="100%">
				</button>
				<div class="popup_content">
					<form method="post" action="http://127.0.0.1:8880/api/alarm-data-deal">
						<fieldset>
							<legend>维修申请</legend>
							<p>
								序号:
								<select name="requ_alarm_id">
									<option value="" label=""></option>
								</select>
							</p>
						</fieldset>
						<br>
						<fieldset>
							<legend>维修完成提交</legend>
							<p>
								序号:
								<select name="sub_alarm_id">
									<option value="" label=""></option>
								</select>
							</p>
						</fieldset>
						<br>
						<div class="popup_btn">
							<button type="reset">重置</button>
							<button type="submit">确认</button>
						</div>
					</form>
				</div>
			  </div>
			</div>
			<button id="exit" type="button" onclick="exit()">退出</button>
			<div id="menu">
				<button id="leave" type="button" onclick="leave()">
					<img src="/static/image/离开.png" alt="退出" width="20px">
				</button>
				<ul>
					<li><a href="/chart">数据实时监测图</a></li>
					<li><a href="/excel?q=device">设备数据表</a></li>
					<li style="background-color: grey;"><a href="/excel?q=alarm">异常数据表</a></li>
					<li><a href="/excel?q=staff">人员名单</a></li>
				</ul>
			</div>
		</nav>
		<div id="mask"></div>
		<div id="container">
			<table>
				<caption>异常数据表</caption>
				<thead>
					<tr>
						<th>序号</th>
						<th>出错参数名称</th>
						<th>出错参数值</th>
						<th>处理状态</th>
						<th>处理人员</th>
						<th>出错产生时间</th>
						<th>维修人员开始处理的时间</th>
						<th>错误修正时间</th>
						<th>严重程度</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<script type="application/javascript" src="/static/js/interact.js"></script>
		<script type="application/javascript" src="/static/js/excel_data.js"></script>
		<script>
			// 处理报警事务或人员管理用到的按钮（右上角），对应的点击事件回调函数，用于弹出窗口
			function showPopup(){
				var overlay = document.getElementById("overlay");
				overlay.style.display = "block";
			}
			// 处理报警事务或人员管理用到的按钮（右上角），对应的点击事件回调函数，用于关闭弹出窗口
			function hidePopup(){
				var overlay = document.getElementById("overlay");
				overlay.style.display = "none";
			}
			// 更换程度的显示效果，用颜色矩形代替单调的数字
			function replace_extent(){
				var extent = null;
				let extents = document.querySelectorAll("td:nth-of-type(9)");
				for (let i = 0; i < extents.length; i++){
					extent = extents[i]
					switch(parseInt(extent.textContent)){
						case 3:{
							extent.style.backgroundColor = "red";
							extent.style.backgroundClip = "content-box";
							extent.textContent = "严重";
							extent.style.textAlign = "center";
							break;
						}
						case 2:{
							extent.style.backgroundColor = "yellow";
							extent.style.backgroundClip = "content-box";
							extent.textContent = "警告";
							extent.style.textAlign = "center";
							break;
						}
						case 1:{
							extent.style.backgroundColor = "#d2e610";
							extent.style.backgroundClip = "content-box";
							extent.style.conten
							extent.textContent = "轻微";
							extent.style.textAlign = "center";
							break;
						}
						case 3:{
							extent.style.backgroundColor = "green";
							extent.style.backgroundClip = "content-box";
							extent.textContent = "正常";
							extent.style.textAlign = "center";
							break;
						}
					}	
				}
			}
			// 格式化日期，
			// 将 Sun Dec 01 2024 22:03:17 GMT+0800 (中国标准时间) 转换为 2020-01-13 16:00:00
			// 和device_excel.html的同名函数不同，这里多了判断且需要调用多次
			function format_date(num){
				let dates = document.querySelectorAll(`td:nth-of-type(${num})`);
				for (let i = 0; i < dates.length; i++){
					data = dates[i];
					if (data.textContent != "null") {
						let date = new Date(data.textContent);
						data.textContent = date.toLocaleString().replaceAll("/", "-");
					}
					
				}				
			}
			// 填充 处理报警事务或人员管理用到的按钮（右上角） 的弹出窗口
			// 将数据的序号填充到选项列表中
			// 和staff_excel.html同名的函数不一样
			function set_oprions(){
					let fieldsets = document.querySelectorAll("fieldset");
					let nums = document.querySelectorAll("td:nth-of-type(1)");
					for (let i = 0; i < fieldsets.length; i++){
						let select = fieldsets[i].querySelector("select");
						let strHtml = "";
						for (let j = 0; j < nums.length; j++){
							num = nums[j];
							strHtml += `<option value="${ num.textContent }" label="${ num.textContent }"></option>`;
						}
						select.insertAdjacentHTML("beforeend", strHtml);
					}
			}
			// 将处理人员编号（例如3，1，2）--> 处理人员姓名
			function rep_transactor(){
				if (!window.m){
					return;
				}
				let transactors = document.querySelectorAll("td:nth-of-type(5)");
				for (const transactor of transactors){
					if (transactor.textContent.search(/\d/) != -1){
						transactor.textContent = window.m.get(+transactor.textContent);
					}
				}
			}
			// 替换处理状态的显示
			function rep_status(){
				let status = document.querySelectorAll("td:nth-of-type(4)");
				let transactors = document.querySelectorAll("td:nth-of-type(5)");
				let index = 0;
				for (const i of status){
					switch (i.textContent){
						case "1":
							i.textContent = "已处理";
							break;
						case "0":
							if (transactors[index].textContent !== "null"){
								i.textContent = "处理中";	
								break
							}
							i.textContent = "未处理";
					}
					index += 1;
				}

			}
			// 替换表中的null值
			function rep_null(){
				let tds = document.getElementsByTagName("td");
				for (const td of tds){
					if (td.textContent == "null"){
						td.textContent = "(暂无)";
						td.style.color = "gray";
					}
				}
			}
			// 将上述操作整合
			function total(){
				format_date(6);
				format_date(7);
				format_date(8);
				replace_extent();
				per_show();  // 定义在interact.js文件中
				nav_show();  // 定义在interact.js文件中
				set_oprions();
				rep_transactor();
				rep_status();
				rep_null();
			}
			setTimeout(total,1000);  // 设置函数延迟执行，以防止数据还未送达就先一步执行
		</script>
	</body>
</html>
